<template>
  <div class="custom-table">
    <SearchBar :search-option="searchOption" @handleSearch="handleSearch" />
    <CommonPanel style="flex: 1 1">
      <template #left>
        <div class="tab-menu-list">
          <div
            v-for="menuItem in tabMenuList"
            :key="menuItem.key"
            class="tab-menu-item"
            :class="{ 'action-menu': actionMenu === menuItem.key }"
            @click="handleMenuChange(menuItem)"
          >
            {{ menuItem.name }}
          </div>
        </div>
      </template>
      <template #right>
        <el-button type="primary" @click="handleCreate"> 新建 </el-button
        ><el-button type="primary" @click="handleExport"> 导出 </el-button>
      </template>
      <template #body>
        <MyTable
          ref="myTable"
          :multiple="multiple"
          :table-data="tableData"
          :table-option="tableOption"
        >
        </MyTable>
      </template>
      <template #footer>
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="pageSizes"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageTotal"
          @sizeChange="handleSizeChange"
          @currentChange="handleCurrentChange"
        />
      </template>
    </CommonPanel>
  </div>
  <!-- 新建质控表-弹窗 -->
  <CreateQCTableDialog :options="CQCTOption" @close="handleClose('CQCT')" @confirm="cefConfirm" />
  <!-- 新建多人质控表-弹窗 -->
  <CreateMultipleQCTable
    :options="CMQCTOption"
    @close="handleClose('CMQCT')"
    @confirm="cefConfirm"
  />
  <!-- 新建夜查房质控明细表 -->
  <CreateNIQCDialog :options="NIQCOption" @close="handleClose('NIQC')" @confirm="cefConfirm" />
</template>

<script>
  import CreateQCTableDialog from './Dialogs/CreateQCTableDialog.vue';
  import CreateNIQCDialog from './Dialogs/CreateNIQCDialog.vue';
  import CreateMultipleQCTable from './Dialogs/CreateMultipleQCTableDialog.vue';
  import { getSearchOption, getTableOption } from './config';
  import SearchBar from '@/components/common/SearchBar.vue';
  import MyTable from '@/components/common/Table.vue';
  import CommonPanel from '@/components/common/CommonPanel.vue';
  export default {
    components: {
      SearchBar,
      MyTable,
      CreateQCTableDialog,
      CreateNIQCDialog,
      CreateMultipleQCTable,
      CommonPanel,
    },
    props: {},
    data() {
      return {
        // 分页变量
        currentPage: 1,
        pageSize: 10,
        pageTotal: 3,
        pageSizes: [10, 20, 30, 40],
        // 新建质控表-配置项
        CQCTOption: {
          width: 648, // 宽度
          title: '新建质控表', // 标题
          modal: false, // 遮罩
          visible: false, // 控制显示
          cancelText: '取消', // 取消按钮文字
          confirmText: '确定', // 确定按钮颜色
        },
        // 新建多人质控表-配置项
        CMQCTOption: {
          width: 648,
          title: '新建多人质控表',
          modal: false,
          visible: false,
          cancelText: '取消',
          confirmText: '确定',
        },
        // 新建夜查房质控明细表-配置项
        NIQCOption: {
          width: 458,
          title: '新建夜查房质控明细表',
          modal: false,
          visible: false,
          cancelText: '取消',
          confirmText: '确定',
        },
        // 左侧菜单action变量
        actionMenu: 'b',
        // 左侧菜单列表
        tabMenuList: [
          { name: '我创建的', key: 'b' },
          { name: '待我处理', key: 'c' },
          { name: '我已处理', key: 'd' },
        ],
        // 搜索项
        searchOption: [],
        // 表格项
        tableOption: [],
        // 表格数据
        tableData: [
          {
            rq: '123',
            bq: '456',
            ry: 789,
          },
          {
            rq: '123',
            bq: '456',
            ry: 789,
          },
        ],
      };
    },
    computed: {
      multiple() {
        return true;
      },
    },
    watch: {},
    created() {
      this.searchOption = getSearchOption(this.$route.meta.key);
      this.tableOption = [
        ...getTableOption(this.$route.meta.key),
        {
          label: '操作',
          key: 'options',
          optionList: [
            {
              name: '查看',
              type: 'primary',
              link: true,
              fn: this.show,
            },
            {
              name: '删除',
              type: 'primary',
              fn: this.delete,
            },
          ],
        },
      ];
    },
    mounted() {},
    methods: {
      handleSizeChange() {},
      handleCurrentChange() {},
      // 弹窗-取消
      handleClose(key) {
        this[`${key}Option`].visible = false;
      },
      // 新建评价表-确定
      cefConfirm() {},
      // 新建按钮
      handleCreate() {
        this.NIQCOption.visible = true;
      },
      // 导出
      handleExport() {
        const checkItems = this.$refs.myTable.multipleSelection;
        if (checkItems && checkItems.length > 0) {
        } else {
          this.$message.error('请勾选需要导出的列！');
        }
        console.log('22225465wewewweew', this.$refs.myTable.multipleSelection);
      },
      show(scope, item) {},
      delete(scope, item) {},
      // 表格左侧菜单-改变
      handleMenuChange(menuItem) {
        this.actionMenu = menuItem.key;
      },
      // 根据条件查询
      handleSearch(searchData) {
        console.log('456456456456');
      },
    },
  };
</script>

<style lang="scss">
  .custom-table {
    .el-table th.el-table__cell {
      background-color: #f8f9f9;
      color: #666666;
    }
  }
</style>

<style lang="scss" scoped></style>
